<template>
  <div class="f-all">
    <van-nav-bar title="车行记录" left-text="返回" left-arrow @click-left="onClickLeft" />
    <div class="two-right-top1">
       <div class="two-bottom-bottom2-zi">实时数据</div>
      <div class="two-right-top1-2" v-for="item in car_xinxi" :key="item.attendance_id">
        <img :src="item.carinfo_url" alt width="100%" height="210rem" />
      </div>
      <div class="f-car2" v-for="(item, index) in car_xinxi" :key="index">
        <span>
          <span v-if="item.carinfo_state == 0" style="color: blue">入场</span>
          <span v-if="item.carinfo_state == 1" style="color: red">离场</span>
        </span>
        <div v-for="(item, index) in car_xinxi" :key="index">
          <p>{{ item.carinfo_number }}</p>
        </div>
        <div v-for="item in car_xinxi" :key="item.people_status">
          <p class="two-right-top1-3-1">{{ item.carinfo_type }}</p>
          <p class="two-right-top1-3-1">{{ item.carinfo_start }}</p>
          <p class="two-right-top1-3-1">
            <span v-if="item.carinfo_kind == 0">内部车</span>
            <span v-if="item.carinfo_kind == 1">外部车</span>
          </p>
        </div>
      </div>
    </div>
    <div class="two-right-top2">
      <div class="two-bottom-bottom2-zi">数据总览</div>
      <div class="three">
        <!-- <div class="three1">车辆信息:</div> -->
        <div class="three2" v-for="(item) in  xiang_car" :key="item.carinfo_id">
          <div class="three2-1">
            <img :src="item.carinfo_url" alt width="100%" height="57rem" style=" border-radius:55%" />
          </div>
          <div class="three2-2">
            <div class="three2-21"> {{item.carinfo_number}}</div>
            <div class="three2-22"> {{item.carinfo_type}}</div>
            
          </div>
          <!-- <div class="three2-3">{{item.carinfo_type}}</div> -->
          <div class="three2-3">
            <span v-if="item.carinfo_state == 0" style="color: blue">入场</span>
            <span v-if="item.carinfo_state == 1" style="color: red">离场</span>
          </div>
          <div class="three2-4">
            {{ item.carinfo_start}}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { Toast } from 'vant';
import http from '../api';
export default {
  data() {
    return {
      car_xinxi: [],
      xiang_car: [],
    };
  },
  methods: {
    onClickLeft() {
      this.$router.push({
        name: '主页',
      });
    },
  },
  mounted() {
    // 实时车辆
    http.getBuildCarList({}).then((r) => {
      console.log('车辆', r);
      this.car_xinxi = r.data;
    });
    // 车辆信息
    http.lineage({}).then((r) => {
      this.xiang_car = r.data.slice(0, 4);
      console.log('123', r.data.slice(0, 5));
    });
  },
};
</script>
<style scoped>
.two-bottom-bottom2-zi {
  font-size: 1.8rem;
  height: 2.5rem;
  margin-top: 1rem;
  /* font-weight: 600; */
  /* background-color: rgba(14, 64, 134, 0.8); */
  /* margin-top: 10px;
  margin-left: 15px; */
  /* font-style: italic; */
  font-weight: 700;
}
.f-all {
  width: 100%;
  /* height: 60rem; */
}
.two-right-top1 {
  width: 100%;
  margin-bottom: 1rem;
  /* background-color: aquamarine; */
  /* display: flex; */
  /* margin-left: 1rem; */
  /* overflow: hidden; */
}
.f-car2 {
  width: 45%;
  display: inline-block;
  font-size: 1.6rem;

  margin-left: 1rem;
  overflow: hidden;
  /* background-color: aquamarine; */
}
.two-right-top1-2 {
  width: 50%;
  display: inline-block;
  margin-top: 1rem;
 
}
.two-zi {
   background-color: rgb(137, 180, 207);
  font-size: 1.8rem;
  height: 3rem;
  line-height: 3rem;
  /* margin-top: 1rem; */
  font-family: 600;
  /* margin-left: 1rem; */
  color: rgb(2, 24, 41);
  /* line-height: 2.3rem; */
}
.three {
  width: 100%;
  height: 30rem;
  /* background-color: blueviolet; */
  /* margin-top: 1rem; */
}
.three1 {
  width: 100%;
  height: 3rem;
  border-top: 1px solid rgb(7, 139, 248);
  /* background-color: chocolate; */
  line-height: 3rem;
  font-size: 1.5rem;
}
.three2 {
  width: 100%;
  height: 5.9rem;
  /* background-color: cornflowerblue; */
  overflow: hidden;
  margin-top: 1rem;

  border-top: 1px solid gainsboro;
}
.three2-1 {
  width: 15%;
  margin-top: 1rem;
  overflow: hidden;
  margin-left: 0.5rem;
  display: inline-block;
}
.three2-2 {
  width: 20%;
  display: inline-block;
  height: 5.5rem;
  font-size: 1.5rem;
  margin-left: 0.5rem;
  /* background-color: goldenrod; */
  line-height: 5.5rem;
  position: relative;
  overflow: hidden;
}
.three2-21{
position: absolute;
top: -1.1rem;
}
.three2-22{
position: absolute;
top: 1.2rem;
color: rgb(108, 166, 202);
}
.three2-3{
   width: 14%;
  display: inline-block;
  height: 5.5rem;
  font-size: 1.5rem;
  margin-left: 0.5rem;
  /* background-color: goldenrod; */
  line-height: 5.5rem;
  overflow: hidden;
}
.three2-4{
     width: 40%;
  display: inline-block;
  height: 5.5rem;
  font-size: 1.5rem;
  /* margin-left: 0.5rem; */
  /* background-color: goldenrod; */
  line-height: 5.5rem;
  overflow: hidden;
}
</style>